<template>
	<div class="goods-hot">
		<h3>{{ title }}</h3>
		<!-- 商品区块 -->
		<RouterLink :to="`/goods-detail/${item.id}`" v-for="item in goodsHotListData" :key="item.id" class="goods-item">
			<img :src="item.picture" />
			<p class="name ellipsis">{{ item.name }}</p>
			<p class="desc ellipsis">{{ item.desc }}</p>
			<p class="price">&yen;{{ item.price }}</p>
		</RouterLink>
	</div>
</template>

<script>
	export default {
		name: 'DetailHotList',
	}
</script>

<script setup>
	import { ref, onMounted, computed } from 'vue'
	import { useRoute } from 'vue-router'
	import { reqGoodsHotListData } from '@/apis/goodsDetail'

	const props = defineProps({
		hotType: {
			type: Number,
			required: true,
		},
	})

	const HOTLISTTYPE = {
		1: '24小时热榜',
		2: '本周热榜',
	}

	const route = useRoute()
	// 热榜商品数据
	const goodsHotListData = ref([])

	// 获取热榜商品数据
	async function getGoodsHotListData() {
		try {
			const res = await reqGoodsHotListData({ id: route.params.id, type: props.hotType })
			goodsHotListData.value = res.result
		} catch (error) {
			throw error
		}
	}

  // 标题
  const title = computed(() => {
    return HOTLISTTYPE[props.hotType]
  })

	onMounted(() => {
		getGoodsHotListData()
	})
</script>

<style scoped lang="scss">
	.goods-hot {
		h3 {
			height: 70px;
			background: $helpColor;
			color: #fff;
			font-size: 18px;
			line-height: 70px;
			padding-left: 25px;
			margin-bottom: 10px;
			font-weight: normal;
		}

		.goods-item {
			display: block;
			padding: 20px 30px;
			text-align: center;
			background: #fff;

			img {
				width: 160px;
				height: 160px;
			}

			p {
				padding-top: 10px;
			}

			.name {
				font-size: 16px;
			}

			.desc {
				color: #999;
				height: 29px;
			}

			.price {
				color: $priceColor;
				font-size: 20px;
			}
		}
	}
</style>
